<template>
	<view class="container">
		<wjf-stat-breadcrumb :routes="showRoutes"></wjf-stat-breadcrumb>
		<unicloud-db ref="udb" @load="onLoadData" :collection="collectionList"
			v-slot:default="{data, loading, hasMore,error, options}" :options="options">

			<view class="title-box">
				<text class="title-text">{{data[0].title[locaLang]}}</text>
			</view>
			<template v-for="(item,index) in data[0].content" :key="index">
				<view class="content-text-box" v-if="item.type=='text'">
					<text>{{item.text[locaLang]}}</text>
				</view>
				<view class="content-img-box" v-if="item.type=='img'">
					<image :src="item.url" mode="heightFix" @click="onClickImg(item.url)"></image>
				</view>
				<view class="content-text-box" v-if="item.type=='subTitle'">
					<text class="sub-title">{{item.subTitle[locaLang]}}</text>
				</view>
			</template>

			<!-- 加载更多组件 -->
			<!-- <uv-load-more style="margin-top: 30rpx;"
				:status="loading?'loading':''"></uv-load-more> -->

		</unicloud-db>
		<view class="" style="height: 200px;"></view>

	</view>
</template>

<script>
	const db = uniCloud.database()
	import message from './i18n/index.js'
	const $w = (key) => {
		return message[uni.getLocale()][key]
	}
	export default {
		data() {
			return {
				article_id: '',
				routes: [],
				insex: 0
			}
		},
		computed: {
			locaLang() {
				return uni.getLocale()
			},
			collectionList() {
				return [
					db.collection('opendb-news-articles').where({
						_id: this.article_id
					}).field('avatar,title,content,category_id,author,is_online').getTemp(),
					db.collection('opendb-news-categories').field('_id,name').getTemp()
				]
			},
			showRoutes() {
				return this.routes
			},
			$w() {
				return $w
			},
		},
		onLoad(e) {
			if (e.id) {
				this.article_id = e.id
			}
			if (e.i) {
				this.index = e.i * 1
			}
		},
		watch: {
			locaLang() {
				this.$refs.udb.loadData()
			}
		},
		methods: {
			onLoadData(e) {
				let routesData = e[0].category_id
				// console.log(routesData);
				let ttKey=routesData[1].name['zh-Hans']== '联盟新闻' ?'0':'1'
				this.routes = routesData.reduce((pre, curr, index) => {
					pre.push({
						name: curr.name[this.locaLang],
						to: index == 0 ? ('/pages/publish/news-article-list?i=')+ ttKey: ''
					})
					return pre
				}, [])
				console.log(this.routes);
			},
			onClickImg(url) {
				uni.previewImage({
					urls: [url]
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		max-width: 800px;
		// height: 100vh;
		/* 设置最大宽度 */
		margin: 0 auto;
		/* 居中显示 */
		// padding: 20px;
		/* 添加内边距（可选） */
		background-color: #efefef;
	}

	.title-box {
		padding: 30px 6% 0 6%;
		margin-bottom: 20px;
		text-align: center;

		.title-text {
			color: #555;
			font-size: 24px;
			font-weight: 550;
		}

	}

	.content-text-box {
		margin: 10px 0;
		padding: 5px 10px;

		text {
			color: #444;
			font-size: 16px;
		}

		.sub-title {
			font-weight: 600;
		}
	}

	.content-img-box {
		margin: 10px 0;
		text-align: center;
		height: 200px;

		image {
			height: 100%;
			border-radius: 4px;
		}
	}
</style>